Les Dropdown Toggles permettent d'afficher ou de masquer du contenu.
Ils sont personnalisables au besoin, vous en avez plusieurs exemples ci-dessous.
Pour que les dropdowns soient ouverts au chargement il faut ajouter la class open sur l'élement c-dropdown-toggle__header ou sur l'élement js-dropdown-trigger
Pour ajouter un titre supplémentaire au dropdown, comme par exemple Présentation sur la page Aide, il faut utliser l'élément souhaité avec la class c-dropdown-title
.js requis :
<div class="o-dropdown-toggle">
<div class="c-dropdown-toggle__header">
<div class="u-title--small">Cliquez moi</div><i class="c-fonticon__icon-chevron"></i>
</div>
<div class="c-dropdown-toggle__content">
<div class="bubble">Pour afficher ou cacher cette partie</div>
</div>
</div>
<div class="o-dropdown-toggle">
<div class="c-dropdown-toggle__header open">
<div class="u-title--small">Cliquez moi</div><i class="c-fonticon__icon-chevron"></i>
</div>
<div class="c-dropdown-toggle__content">
<div class="bubble">Pour afficher ou cacher cette partie</div>
</div>
</div>
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-title--small">Cliquez moi</div><i class="c-fonticon__icon-chevron"></i>
</div>
<div class="c-dropdown-toggle__content">
<div class="bubble">Pour afficher ou cacher cette partie</div>
</div>
</div>
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header open">
<div class="u-title--small">Cliquez moi</div><i class="c-fonticon__icon-chevron"></i>
</div>
<div class="c-dropdown-toggle__content">
<div class="bubble">Pour afficher ou cacher cette partie</div>
</div>
</div>
<div class="o-dropdown-toggle--blueGrey">
<div class="c-dropdown-toggle__header">
<div class="u-title--small">Cliquez moi</div><i class="c-fonticon__icon-chevron"></i>
</div>
<div class="c-dropdown-toggle__content">
<div class="u-centerSpaceBetween">
<div class="u-title--mini">Michelin Carmes - 9848</div>
<div class="u-subtitle">Modifié le 09/08/2019</div>
</div>
<div class="u-centerSpaceBetween">
<div class="u-title--mini">Michelin Carmes - 9848</div>
<div class="u-subtitle">Modifié le 09/08/2019</div>
</div>
</div>
</div>
<div class="o-dropdown-toggle--blueGrey--tree">
<div class="c-dropdown-toggle__header">
<div class="u-title--small">Cliquez moi</div><i class="c-fonticon__icon-chevron"></i>
</div>
<div class="c-dropdown-toggle__content">
<div class="u-centerSpaceBetween">
<div class="u-title--mini">Michelin Carmes - 9848</div>
<div class="u-subtitle">Modifié le 09/08/2019</div>
</div>
<div class="u-centerSpaceBetween">
<div class="u-title--mini">Michelin Carmes - 9848</div>
<div class="u-subtitle">Modifié le 09/08/2019</div>
</div>
</div>
</div>
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">1 sondages</div>
</div>
</div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin disabled"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
</div>
</div>
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-title--mini">Remblai Lorem Ipsum</div>
</div>
</div>
<div class="c-dropdown-toggle__content">
<div class="u-column u-bubble">
<div class="u-text u-fullsize">Remblai Lorem</div>
<div class="u-centerSpaceAround u-fullsize"><a class="u-flex u-text--small" href="#"><i class="c-fonticon__icon-check"></i><span>Appliquer</span></a>
<div class="o-iconlist"><i class="c-fonticon__icon-edit"></i><i class="c-fonticon__icon-trash"></i></div>
</div>
</div>
</div>
<div class="o-card--big">
<div class="c-card__header">
<div class="u-title--small">Sondages
<div class="o-checkbox js-checkChildren">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"></label>
</div>
</div><a class="o-btn o-btn--icon js-popin fileUploader" href="popins/addProbing.html"><i class="c-fonticon__icon-plus"></i></a>
</div>
<div class="c-card__content">
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-flex">
<div class="o-checkbox js-checkChildren">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">4 sondages</div>
</div>
</div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C002</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C003</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C004</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
</div>
</div>
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-flex">
<div class="o-checkbox js-checkChildren">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">3 sondages</div>
</div>
</div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C002</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex">
<div class="o-checkbox">
<input type="checkbox" name="projet-current"/><span></span>
<label class="u-text" for="projet-current"> </label>
</div><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C003</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
</div>
</div>
<div class="o-dropdown-toggle--tree">
<div class="c-dropdown-toggle__header">
<div class="u-flex"><i class="c-fonticon__icon-chevron"></i>
<div class="u-column">
<div class="u-title--mini">2466 ST FLOUR 29-03-2017</div>
<div class="u-subtitle">5 sondages</div>
</div>
</div>
<div class="o-iconlist"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
</div>
<div class="c-dropdown-toggle__content">
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C001</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C002</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C003</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C004</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
<div>
<div class="u-flex"><i class="c-fonticon__icon-pin"></i>
<div class="u-column">
<div class="u-title--mini">Sondage n°C005</div>
<div class="u-subtitle">Profondeur : 0.89`</div>
</div>
</div>
<div class="o-iconlist u-hideOnMobile"><a><i class="c-fonticon__icon-edit"></i></a><a><i class="c-fonticon__icon-trash"></i></a></div>
<div class="o-iconlist u-showOnMobile u-title--small"><a><i class="c-fonticon__icon-mobmore"></i></a></div>
</div>
</div>
</div>
</div>
</div>